
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./recharge.module.less"
import React, { Fragment, useState ,useEffect,useRef} from 'react'
import { Select, DatePicker } from 'antd'
import dayjs from 'dayjs'
import {
	Toast,
} from 'antd-mobile'
import { login,recharge_record,recharge_drawing_record,recharge_user_fsjl ,user_rgydjl,user_hljl,ajax_zhuanpanlist} from "@/apis/user.js"


const Recharge = (props) => {
	const navigate = useNavigate()
	const containerRef = useRef(null);
	const [selecttime,setselecttime]=useState(0)
	const [starttime, setStarttime] = useState(dayjs());
	const [endtime,setendtime]= useState(dayjs());
	const [data,setData]=useState([])
	const [type,setType]=useState('1')
	const [page, setPage] = useState(1)
	const [pageobj, setPageobj] = useState({})
	const [pageFlag,setpageFlag] = useState(true)
	const [loading,setLoading] = useState(false)
	const dateFormat = 'YYYY-MM-DD';

	useEffect(() => {
		document.getElementById('root').scrollIntoView(true);
		document.getElementById('body').scrollIntoView(true);
		// window.addEventListener('scroll', handleScroll);
		return ()=>{
			window.removeEventListener('scroll', handleScroll);
		}
	  }, []);
	  useEffect(() => {
		if (loading) {
		  // 模拟异步加载数据
		  setTimeout(() => {
			setLoading(false);
		  }, 1000);
		}
	  }, [loading]);
	  const handleScroll = () => {
		const container = containerRef.current;
		console.log(container.clientHeight)
		console.log(container.scrollHeight)
		console.log(container.scrollTop)
		console.log(page)
		if (container) {
		  const docHeight = container.scrollHeight;
		  const windowHeight = container.clientHeight;
		  const scrollTop =  container.scrollTop;
		  if (scrollTop + windowHeight >= docHeight && !loading){
			if(pageFlag){
				setPage((prve)=>(prve*1)+1)
			}
		  } 
		}
	  };
	  const changeTab=(current)=>{
		let today = new Date();

		if(current == 0){
			let yesterday = new Date(today);
			yesterday.setDate(today.getDate() - 0);
			setendtime(dayjs())
			setStarttime(dayjs())
		//	getAdapter()
		}
		if(current == 1){
			let yesterday = new Date(today);
			yesterday.setDate(today.getDate() - 1);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(1, 'day'))
		//getAdapter()
		}
		if(current == 2){
			let sevenDaysAgo = new Date(today);
			let yesterday = new Date(today);
			sevenDaysAgo.setDate(today.getDate() - 7);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(7, 'day'))
			//getAdapter()
		}
		if(current == 3){
			let thirtyDaysAgo = new Date(today);
			let yesterday = new Date(today);
			thirtyDaysAgo.setDate(today.getDate() - 30);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(30, 'day'))
			//getAdapter()
		}
		setpageFlag(true)
		setselecttime(current) 
		setPage(1)
	}
	function topPage(){
		if(page <= 1)return
		setPage((prve)=>prve - 1)
	}
	function bottomPage(){
		setPage((prve)=>prve+1)
	}
	useEffect(() => { //交易记录
		console.log(type,777777)
		getAdapter()
		setpageFlag(true)
	  }, [type,page,selecttime]);
	
	const handleChange=(value)=>{
		setPage(1)
		setType(value)
		// const container = containerRef.current.scrollTop(0);
	}
	const getAdapter1=(value)=>{
		typeof page == "number" ?  setPage('1') :  setPage(1)
	}
	const formatDate = (dater) => {
		const dateString = dater;
		const date = new Date(dateString);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
		return formattedDate
	}
	function onChange(date, dateString) {
		// console.log(date)
		// console.log(dateString)
		setStarttime(date)
	}
	
	function onChange1(date, dateString) {
		setendtime(date)
	}
	const getAdapter = ()=>{
		Toast.show({
			icon: 'loading',
			content: t('login.title53'),//'加载中'
		  })
		if(type == 1){   //充值
			recharge_record(
				{
					start_time:formatDate(starttime),
					end_time:formatDate(endtime),
					type:type,
					page:page
				}
			).then(res => {
				Toast.clear()
				setLoading(true)
				setPageobj(res.data.data)
				if(res.status.errorCode == 0){
					// setData(res.data.data.data)
					if(page == 1){
						setData(res.data.data.data)
					}else{
						setData([...data,...res.data.data.data])
					}
					// if(page >= res.data.data.last_page){
					// 	Toast.show({
					// 		icon: 'loading',
					// 		content: t('p.a4'),
					// 	})
					// 	setpageFlag(false)
					// }
				}
				
				// if (res.status.errorCode == 0) 1 == page ? setData(res.data.data.data) : setData(...res.data.data.data,...data)
				// if(res.data.data.data.length <= 0){
				// 	Toast.show({
				// 		content: '暂无数据',
				// 	})
				// } 
			})
		}
		if(type == 2){   //提款
			recharge_drawing_record(
				{
					start_time:formatDate(starttime),
					end_time:formatDate(endtime),
					type:type,
					page:page
				}
			).then(res => {
				Toast.clear()
				setLoading(true)
				setPageobj(res.data.data)
				// if(res.data.data.data.length <= 0){
				// 	Toast.show({
				// 		content: '暂无数据',
				// 	})
				// } 
				if(res.status.errorCode == 0){
					// setData(res.data.data.data)
					if(page == 1){
						setData(res.data.data.data)
					}else{
						setData([...data,...res.data.data.data])
					}
					// if(page >= res.data.data.last_page){
					// 	Toast.show({
					// 		icon: 'loading',
					// 		content: t('p.a4'),//'加载中'
					// 	})
					// 	setpageFlag(false)
					// }
				}
				// if (res.status.errorCode == 0) 1 == page ? setData(res.data.data.data) : setData(...res.data.data.data,...data)
			})
		}
		if(type == 3){   //红利
			user_hljl(
				{
					start_time:formatDate(starttime),
					end_time:formatDate(endtime),
					type:type,
					page:page
				}
			).then(res => {
				Toast.clear()
				setLoading(true)
				res.data.data.data.length > 0 && res.data.data.data.forEach(element => {
					element.status = 2
				});
				setPageobj(res.data.data)
				// if(res.data.data.data.length <= 0){
				// 	Toast.show({
				// 		content: '暂无数据',
				// 	})
				// } 
				if(res.status.errorCode == 0){
					// setData(res.data.data.data)
					if(page == 1){
						setData(res.data.data.data)
					}else{
						setData([...data,...res.data.data.data])
					}
					// if(page >= res.data.data.last_page){
					// 	Toast.show({
					// 		icon: 'loading',
					// 		content: t('p.a4'),//'加载中'
					// 	})
					// 	setpageFlag(false)
					// }
				}
				// if (res.status.errorCode == 0) 1 == page ? setData(res.data.data.data) : setData(...res.data.data.data,...data)
			})
		}
		if(type == 4){   //返水
			recharge_user_fsjl(
				{
					start_time:formatDate(starttime),
					end_time:formatDate(endtime),
					type:type,
					page:page
				}
			).then(res => {
				Toast.clear()
				setLoading(true)
				res.data.data.data.length > 0 && res.data.data.data.forEach(element => {
					element.status = 2
				});
				setPageobj(res.data.data)
				// if(res.data.data.data.length <= 0){
				// 	Toast.show({
				// 		content: '暂无数据',
				// 	})
				// } 
				if(res.status.errorCode == 0){
					// setData(res.data.data.data)
					if(page == 1){
						setData(res.data.data.data)
					}else{
						setData([...data,...res.data.data.data])
					}
					// if(page >= res.data.data.last_page){
					// 	Toast.show({
					// 		icon: 'loading',
					// 		content: t('p.a4'),//'加载中'
					// 	})
					// 	setpageFlag(false)
					// }
				}
				// if (res.status.errorCode == 0) 1 == page ? setData(res.data.data.data) : setData(...res.data.data.data,...data)
			})
		}
		if(type == 5){   //人工移动
			user_rgydjl(
				{
					start_time:formatDate(starttime),
					end_time:formatDate(endtime),
					type:type,
					page:page
				}
			).then(res => {
				Toast.clear()
				setLoading(true)
				res.data.data.data.length > 0 && res.data.data.data.forEach(element => {
					element.status = 2
				});
				setPageobj(res.data.data)
				// if(res.data.data.data.length <= 0){
				// 	Toast.show({
				// 		content: '暂无数据',
				// 	})
				// } 
				if(res.status.errorCode == 0){
					// setData(res.data.data.data)
					if(page == 1){
						setData(res.data.data.data)
					}else{
						setData([...data,...res.data.data.data])
					}
					// if(page >= res.data.data.last_page){
					// 	Toast.show({
					// 		icon: 'loading',
					// 		content: t('p.a4'),//'加载中'
					// 	})
					// 	setpageFlag(false)
					// }
				}
				// if (res.status.errorCode == 0) 1 == page ? setData(res.data.data.data) : setData(...res.data.data.data,...data)
			})
		}
		if(type == 6){
			ajax_zhuanpanlist(
				{
					start_time:formatDate(starttime),
					end_time:formatDate(endtime),
					type:type,
					page:page
				}
			).then(res => {
				Toast.clear()
				setLoading(true)
				res.data.data.data.length > 0 && res.data.data.data.forEach(element => {
					element.status = 2
				});
				setPageobj(res.data.data)
				// if(res.data.data.data.length <= 0){
				// 	Toast.show({
				// 		content: '暂无数据',
				// 	})
				// } 
				if(res.status.errorCode == 0){
					// setData(res.data.data.data)
					if(page == 1){
						setData(res.data.data.data)
					}else{
						setData([...data,...res.data.data.data])
					}
					// if(page >= res.data.data.last_page){
					// 	Toast.show({
					// 		icon: 'loading',
					// 		content: t('p.a4'),//'加载中'
					// 	})
					// 	setpageFlag(false)
					// }
				}
				// if (res.status.errorCode == 0) 1 == page ? setData(res.data.data.data) : setData(...res.data.data.data,...data)
			})
		}
	}
	const { t } = useTranslation();
	
	return (
		<React.Fragment>
			<HeaderTitle title={t('record.title1')} right_title={t('agent.title2')}/>
			<div className={style['main']}>
				<div className={style['header_group']}>
					<div className={style['time_group']}>
						<div className={`${style['tgitem']} ${selecttime === 0 ? style['active'] : ''}`} onClick={()=>{changeTab(0)}}>{t('profitloss.title2')}</div>
						<div className={`${style['tgitem']} ${selecttime === 1 ? style['active'] : ''}`} onClick={()=>{changeTab(1)}}>{t('profitloss.title3')}</div>
						<div className={`${style['tgitem']} ${selecttime === 2 ? style['active'] : ''}`} onClick={()=>{changeTab(2)}}>{t('profitloss.title4')}</div>
						<div className={`${style['tgitem']} ${selecttime === 3 ? style['active'] : ''}`} onClick={()=>{changeTab(3)}}>{t('profitloss.title5')}</div>
					</div>
					<div className={style['date-section']}>
						<DatePicker onChange={onChange} defaultValue={starttime} value={starttime} />
						<DatePicker onChange={onChange1} defaultValue={endtime} value={endtime}  />
						<div onClick={()=> getAdapter1()} className={style['date-search']}>{t('record.title2')}</div>
					</div>
					<div className="game_group">
						<Select
						  defaultValue={t('record.title3')}
						  style={{ width: '100%',height: '34px' }}
						  onChange={handleChange}
						  options={[
							{ value: '1', label: t('record.title3') },
							{ value: '2', label: t('record.title4') },
							{ value: '3', label: t('record.title5') },
							{ value: '4', label: t('record.title51') },
							{ value: '5', label: t('record.title52') },
							{ value: '6', label: t('record.title53') },
						  ]}
						/>
					</div>
				</div>
				<div className={style['tip_group']}>
					<div className={style['tgcon']}>
						<div className={style['TxtTip']}>{t('record.title6')}</div>
						<div className={style['note']}>{t('record.title7')}</div>
					</div>
				</div>
				{/* onScroll={handleScroll} style={{height: 'calc(100% - 180px)'}}*/}
				<div className={style['content']}  ref={containerRef} >
					<div className={style['table']}>
						<div className={style['thead']}>
							<div className={style['tr']}>
								<div className={style['td']}>{t('record.title8')}</div>
								<div className={style['td']}>{t('record.title9')}</div>
								<div className={style['td']}>{t('record.title10')}</div>
								<div className={style['td']}>{t('record.title11')}</div>
							</div>
						</div>
						<div className={style['tbody']}>
							{/* <div className={style['tr']}>
								<div className={style['td']}>2023-11-09 16:55:01</div>
								<div className={style['td']}>{t('record.title12')}</div>
								<div className={style['td']}>100.24</div>
								<div className={style['td']}>{t('record.title13')}</div>
							</div> */}
														{
								data.length > 0 && data.map((item,index)=>{
									return (
										<div className={style['tr']} key={index}>
											<div className={style['td']}>{item.created_at}</div>
											<div className={style['td']}>{type == 2 ? t('record.title21') : item.type == 1 ? t('record.title20'): item.type == 2 ? t('record.title21') : item.describe}</div>
											<div className={style['td']}>{item.money}</div>
											<div className={style['td']}>{item.status == 1 ? t('record.title17') : item.status == 2 ? t('record.title18') : t('record.title19')  }</div>
										</div>
									)
								})
							}
							{/* {
								pageobj.total != 0 && 
									<div className={style['tr']}>
										<div className={style['td2']}>{t('p.a0')} {pageobj.last_page} {t('p.a1')}</div>
										<div className={style['td2']}></div>
										<div className={style['td2']}></div>
										<div className={style['td3']}>
											{
												page != 1 ? <div onClick={topPage}>{t('p.a2')}</div> : ''
											}
											<div className={style['p1']}>{page}</div>
											{
												page < pageobj.last_page  && <div onClick={bottomPage}>{t('p.a3')}</div>
											}
										</div>
									</div>
							} */}
						</div>
					</div>
					{
						data.length === 0 && (
							<div className={style['NoDataGroup']}>
							<div className={style['noData_bg']}></div>
							<p className={style['txt_tit']}>{t('record.title14')}</p>
							</div>
						)
					}
				</div>
			</div>
			<div className={style['']}></div>
		</React.Fragment>
	)
}


export default Recharge
